<template>
  <div class="data-card-container" :style="styleData">
    <!-- 卡片标题 -->
    <div class="card-title">{{ title }}</div>
    <!-- 卡片内容 -->
    <div class="card-content">
      <!-- 总人数 -->
      <div class="card-content-amount">{{ amount }}</div>
      <!-- 计数单位 -->
      <div class="card-content-text">人</div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface PropsType {
  // 卡片标题
  title: string;
  // 人数
  amount: number;
  // 卡片样式数据
  styleData: object;
}
const props = withDefaults(defineProps<PropsType>(), {
  title: "",
  amount: 0,
  styleData: {}
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
